<template>
    <div>
        <input type="file" @change="uploadVideo">
        <div v-if="taskId">任务ID: {{ taskId }}</div>
        <div v-if="status">{{ status }}</div>
    </div>
</template>


<script>
/**
 * 流程：用户 → SpringBoot → Flask → 视频处理 → 结果返回。
* 上传视频文件到SpringBoot
* 上传完成后，返回任务ID
* 前端轮询任务状态，直到任务完成
*/
import axios from 'axios';

export default {
    data() {
        return {
            taskId: null,
            status: null
        };
    },
    methods: {
        async uploadVideo(e) {
            const file = e.target.files[0];
            const formData = new FormData();
            formData.append('file', file);

            // 提交到SpringBoot
            const response = await axios.post('http://localhost:9090/api/video/upload', formData);
            this.taskId = response.data.task_id;
            console.log(response.data)
            /**
             * {
                * "download_url":"/download/ce04fd19-ae22-439a-ab3b-7a3abd777c14",
                * "status_url":"/status/701cd999-66f8-46c1-b3e8-33ec5397d3b7",
                * "task_id":"701cd999-66f8-46c1-b3e8-33ec5397d3b7"
             * }
            */
            // 查询任务状态
            const timer = setInterval(async () => {
                const res = await axios.get(`http://localhost:9090/api/video/status/${this.taskId}`);
                this.status = res.data.status;
                if (res.data.status === 'completed') {
                    clearInterval(timer);
                    alert('处理完成！下载链接：' + res.data.output_path);
                }
            }, 1000);
        }
    }
};
</script>